<!--商品列表模块-->
<template>
  <view>
    <scroll-view scroll-y="true" class="swiper-item-box">
      <view :class="[filterChecked.selectItemStyle(bannerPosition)]">
        <view class="content" v-for="(item, index) in newlistResult" :key="index"
          :class="[filterChecked.showBannerStyle(item.itemId, item.position, item.isRow,item.activitySelection.dateStatus)]"
          @click.stop="jumpPage" :data-index="index" :data-itemId="item.itemId" :data-valueId="item.valueId"
          :data-valueName="item.valueName" :data-classId="item.classId" v-if="item.isGift != 1">
          <block v-if="item.itemId">
            <view class="image_box">
              <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">NEW</view>
              <block v-if="isAppend > 0">
                <!-- <image :mode='mode' :src='defaultImgUrl' class='image-class' style="{{width ? 'width:' + width : ''}};{{height ? 'height:' + height : ''}}"/> -->
                <!-- <image mode="aspectFit" :src="defaultImgUrl" class="image-class" /> -->
                <image mode="aspectFit" class="hoverUrl" :data-index="index"
                  :class="item.isLoad != true ? 'fade_out' : 'before-load'"
                  :src="item.hoverUrl" @load="finishLoad" />
                <!-- <image :mode='mode' :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'before-load'" :src='item.hoverUrl ? item.hoverUrl : item.majorUrl'
                  @load='finishLoad' style="{{finishLoadFlag && width ? 'width:' + width : ''}};{{finishLoadFlag && height ? 'height:' + height : ''}}" /> -->
              </block>
              <block v-else>
                <!-- <image :mode='mode' :src='defaultImgUrl' class='image-class' style="{{width ? 'width:' + width : ''}};{{height ? 'height:' + height : ''}}"/> -->
                <!-- <image mode="aspectFit" :src="defaultImgUrl" class="image-class" /> -->
                <image mode="aspectFit" :data-index="index" class="majorUrl"
                  :class="item.isLoad != true ? 'fade_out' : 'before-load'"
                  :src="item.hoverUrl" @load="finishLoad" />
                <!-- <image :mode='mode' :data-index="index" :class="item.isLoad != true ? 'fade_out' : 'before-load'" :src='item.majorUrl'
                  @load='finishLoad' style="{{finishLoadFlag && width ? 'width:' + width : ''}};{{finishLoadFlag && height ? 'height:' + height : ''}}" /> -->
              </block>
              <view class="addGoodsIcon" v-if="!!item.stockQty && !item.activitySelection" @click.stop="addCart(item)">
                <image
                  src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-Revamp-Phase 1-NEW-322/Category/Icon Button (1).png"
                  :data-index="index" />
              </view>
            </view>

            <view class="cos-goods">
              <!-- 显示促销 -->
              <view v-if="!!item.promotionTag && item.promotionTag.length > 0">
                <block v-for="(item, index) in item.promotionTag" :key="index">
                  <span class="goodsTag">{{ promotionTag + ' ' }}</span>
                </block>
              </view>
              <view style="margin-top:24rpx ;">
                <view class="cos-goodsEs">{{item.titleName||''}}</view>
              </view>
              <view class="product_name ellipsis" :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
                v-if="showTitle && (!item.drawInfo || !!item.activitySelection && !item.activitySelection.dateStatus)">
                {{ !!item.subtitle?item.subtitle:item.itemName }}
              </view>

              <!--   <view class="active_name_state">
                <view class="activity_name ellipsis"
                  :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
                  {{ !!item.subtitle?item.subtitle:item.itemName}}
                </view>
                <view v-if="!!item.drawInfo&&item.drawInfo.activitySwitch&& !!item.drawStateData&&!!item.drawStateData.drawTitleState"
                style="color:#CB171A; font-size:16rpx;font-weight: 500;">{{item.drawStateData.drawTitleState}}</view>
              </view> -->

              <view class="activity_date" v-if="!!item.drawInfo&&item.drawInfo.activitySwitch&& !!item.drawStateData">
                {{item.drawStateData.drawTitleText}}
              </view>
              <view class="cos-product_info">
                <!-- 现价低于划线价，显示划线价  -->
                <!--  <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">
                  <view class="linePrice">{{ '¥ ' + item.markingPrice / 1 }}</view>
                  <view class="nowPrice">{{ '¥ ' + item.price / 1 }}</view>
                </view> -->

                <!-- <view v-else>      font-family: NotoSansSC-Regular;color: rgba(0,0,0,1);-->
                <view class="price iphone12">
                  <text style="color:#000;font-size: 24rpx;font-family: Noto Sans SC;">¥ <text
                      style="font-family: FrankNew-Regular;padding-left: 4rpx;">{{filterChecked.moneyFormat(item.price / 1 , 2)}}</text></text>
                  <!-- {{filterChecked.moneyFormat(item.price / 1 , 2)}} -->
                </view>
                <!-- </view> -->
                <!--                <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                  <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                    <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                  </block>
                </view> -->
                <!-- <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view> -->
                <!-- 材质标签 -->
                <!-- <view class="marker-text tag2" v-if="item.frontMaterialTag">{{item.frontMaterialTag}}</view> -->


                <!-- 自定义标签 -->
                <view v-if="!!item.customPromotionTags && item.customPromotionTags.length > 0">
                  <!-- 		<promotionTagsTpl :promotionType.sync="customTag" :promotionTagData.sync="item.customPromotionTags" :userGroupId.sync="groupId" :memberLevelGroup.sync="memberLevelId"
                					:memberStatus.sync="memberIsActive"></promotionTagsTpl> -->
                </view>
                <!-- 显示色块 -->
                <!-- <view class="colorBlock" @click.stop="jumpPage" :data-classId = "item.classId" :data-itemId="item.itemId" :data-valueId="item.valueId"
                  :data-valueName="item.valueName">
                  <view class="skuImageUrl" v-for="(item, index) in item.frontProperties" :key="index">
                    <image :src="item.skuImageUrl" />
                  </view>
                </view> -->
              </view>
              <!--   <view v-else class="activity_status"
                :class="[item.activitySelection.joinStatus=='开放登记信息'?'red':item.activitySelection.joinStatus=='等待公布结果'?'green':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
                {{!!item.activitySelection ? item.activitySelection.joinStatus : ''}}
              </view> -->
              <!-- 活动状态按钮 -->
              <!-- <view class="activity_btn" v-if="!!item.drawInfo&&item.drawInfo.activitySwitch&& !!item.drawStateData">
                {{item.drawStateData.drawButtonText?item.drawStateData.drawButtonText: ''}}
              </view> -->
              <!--         <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
                <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                  <view v-if="promotionItem.promotionType == 'forward_purchase'">
                    <view
                      v-if="
                        filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                          filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                      ">
                      <span :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + ' ' }}</span>
                    </view>
                  </view>
                  <view v-if="promotionItem.promotionType !== 'forward_purchase'">
                    <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                      <span :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + ' ' }}</span>
                    </view>
                  </view>
                </block>
              </view> -->

              <!-- 材质标签 -->
              <!-- <view class="marker-text tag2" v-if="item.frontMaterialTag">{{item.frontMaterialTag}}</view> -->
            </view>
          </block>

          <block v-else>
            <!-- banner 位置 -->
            <view class="container" v-for="(bannerItems, bannerKey) in item.bannerContents" :key="bannerKey">
              <view v-if="bannerItems" v-for="(bannerItem, itemKey) in bannerItems" :key="itemKey">
                <!--解析CMS banner-->
                <!-- bannerHTML页面  -->
                <view v-if="bannerItem.type == 'banner'" :style="bannerItem.data.style" :class="[
                    bannerItem.data.class == 'showGrid' ? (showGrid ? 'showGrid' : 'hideGrid') : bannerItem.data.class,
                    bannerItem.data.class == 'showList' ? (showList ? 'showList' : 'hideList') : bannerItem.data.class,
                    bannerItem.data.class == 'showshirt' ? (showTshirt ? 'showshirt' : 'hideshirt') : bannerItem.data.class
                  ]" :id="bannerItem.data.id">
                  <!-- 第一层child  -->
                  <block v-for="(firstbannerItem, firstbannerIndex) in bannerItem.data.child" :key="firstbannerIndex">
                    <!-- tagType == 'img' -->
                    <image class="animated fadeIn" v-if="firstbannerItem.tagType == 'img'"
                      :mode="firstbannerItem.mode ? firstbannerItem.mode : modeStyle" :src="firstbannerItem.src"
                      :class="firstbannerItem.class" :style="firstbannerItem.style"></image>
                    <!-- tagType == 'navigator' -->
                    <navigator v-if="firstbannerItem.tagType == 'navigator'" :url="firstbannerItem.url"
                      :style="firstbannerItem.style" :target="firstbannerItem.target" :class="firstbannerItem.class"
                      hover-class="none">
                      <!-- 第二层child -->
                      <block v-for="(secondbannerimageItem, secondbannerimageIndex) in firstbannerItem.child"
                        :key="secondbannerimageIndex">
                        <image class="animated fadeIn" v-if="secondbannerimageItem.tagType == 'img'"
                          :mode="secondbannerimageItem.mode ? secondbannerimageItem.mode : modeStyle"
                          :src="secondbannerimageItem.src" :class="secondbannerimageItem.class"
                          :style="secondbannerimageItem.style"></image>
                        <view v-if="secondbannerimageItem.tagType == 'div'" :class="secondbannerimageItem.class"
                          :style="secondbannerimageItem.style">
                          {{ secondbannerimageItem.text }}
                        </view>
                        <view v-if="secondbannerimageItem.tagType == 'label'" :class="secondbannerimageItem.class"
                          :style="secondbannerimageItem.style">
                          {{ secondbannerimageItem.text }}
                        </view>
                      </block>
                    </navigator>
                    <!-- tagType == 'a' -->
                    <navigator v-if="firstbannerItem.tagType == 'a'" :url="firstbannerItem.href"
                      :target="firstbannerItem.target" :style="firstbannerItem.style" :class="firstbannerItem.class"
                      hover-class="none">
                      <!-- 第二层child -->
                      <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
                      <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child"
                        :key="secondbannerIndex">
                        <image class="animated fadeIn" v-if="secondbannerItem.tagType == 'img'"
                          :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle" :src="secondbannerItem.src"
                          :class="secondbannerItem.class" :style="secondbannerItem.style"></image>
                        <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class"
                          :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
                      </block>
                    </navigator>
                    <!-- tagType == 'div' -->
                    <view @click="cmsClickHandle" :data-handle="firstbannerItem.onclick"
                      :data-text="firstbannerItem.text" v-if="firstbannerItem.tagType == 'div'" :class="[
                        firstbannerItem.class == 'showGrid' ? (showGrid ? 'showGrid' : 'hideGrid') : firstbannerItem.class,
                        firstbannerItem.class == 'showList' ? (showList ? 'showList' : 'hideList') : firstbannerItem.class,
                        tabName == firstbannerItem.text ? 'active' : ''
                      ]" :style="firstbannerItem.style">
                      <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
                      <!-- 第二层child -->
                      <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child"
                        :key="secondbannerIndex">
                        <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class"
                          :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
                        <p v-if="secondbannerItem.tagType == 'p'" @click="cmsClickHandle"
                          :data-handle="secondbannerItem.onclick" :data-text="secondbannerItem.text"
                          :style="secondbannerItem.style" :class="secondbannerItem.class">
                          {{ secondbannerItem.text }}
                        </p>
                        <label v-if="secondbannerItem.tagType == 'label'" :class="secondbannerItem.class"
                          :style="secondbannerItem.style">{{ secondbannerItem.text }}</label>
                        <span v-if="secondbannerItem.tagType == 'span'" @click="cmsClickHandle"
                          :data-handle="secondbannerItem.onclick" :data-text="secondbannerItem.text"
                          :class="secondbannerItem.class" :style="secondbannerItem.style">
                          {{ secondbannerItem.text }}
                        </span>
                        <image class="animated fadeIn" v-if="secondbannerItem.tagType == 'img'"
                          :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle" :src="secondbannerItem.src"
                          :class="secondbannerItem.class" :style="secondbannerItem.style"></image>
                        <!-- a和里面的child -->
                        <navigator v-if="secondbannerItem.tagType == 'a'" :url="secondbannerItem.href"
                          :target="secondbannerItem.target" :class="secondbannerItem.class"
                          :style="secondbannerItem.style" hover-class="none">
                          <block>{{ secondbannerItem.text }}</block>
                          <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child"
                            :key="thirdbannerIndex">
                            <image class="animated fadeIn" v-if="thirdbannerItem.tagType == 'img'"
                              :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle" :src="thirdbannerItem.src"
                              :class="thirdbannerItem.class" :style="thirdbannerItem.style"></image>
                          </block>
                        </navigator>
                        <!-- 第三层child div里面的div-->
                        <view v-if="secondbannerItem.tagType == 'div'" @click="cmsClickHandle"
                          :data-handle="secondbannerItem.onclick" :data-text="secondbannerItem.text"
                          :class="secondbannerItem.class" :style="secondbannerItem.style">
                          <block v-if="secondbannerItem.text">{{ secondbannerItem.text }}</block>
                          <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child"
                            :key="thirdbannerIndex">
                            <navigator v-if="thirdbannerItem.tagType == 'a'" :url="thirdbannerItem.href"
                              :target="thirdbannerItem.target" :class="thirdbannerItem.class"
                              :style="thirdbannerItem.style" hover-class="none">
                              <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>

                              <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                                :key="fourthbannerIndex">
                                <image class="animated fadeIn" v-if="fourthbannerItem.tagType == 'img'"
                                  :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle"
                                  :src="fourthbannerItem.src" :class="fourthbannerItem.class"
                                  :style="fourthbannerItem.style"></image>
                              </block>
                            </navigator>
                            <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class"
                              :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>
                            <p v-if="thirdbannerItem.tagType == 'p'" @click="cmsClickHandle"
                              :data-handle="thirdbannerItem.onclick" :data-text="thirdbannerItem.text"
                              :style="thirdbannerItem.style" :class="thirdbannerItem.class">
                              {{ thirdbannerItem.text }}
                            </p>
                            <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class"
                              :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>
                            <span v-if="thirdbannerItem.tagType == 'span'" @click="cmsClickHandle"
                              :data-handle="thirdbannerItem.onclick" :data-text="thirdbannerItem.text"
                              :class="thirdbannerItem.class" :style="thirdbannerItem.style">
                              {{ thirdbannerItem.text }}
                            </span>
                            <image v-if="thirdbannerItem.tagType == 'img'"
                              :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle" :src="thirdbannerItem.src"
                              :class="thirdbannerItem.class" :style="thirdbannerItem.style"></image>

                            <!-- 第四层循环 tagType == 'div'-->
                            <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class"
                              :style="thirdbannerItem.style">
                              <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>
                              <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child"
                                :key="fourthbannerIndex">
                                <navigator class="animated fadeInRight" v-if="fourthbannerItem.tagType == 'a'"
                                  :url="fourthbannerItem.href" :target="fourthbannerItem.target"
                                  :class="fourthbannerItem.class" :style="fourthbannerItem.style" hover-class="none">
                                  <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>

                                  <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child"
                                    :key="fifthbannerIndex">
                                    <image v-if="fifthbannerItem.tagType == 'img'"
                                      :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                                      :src="fifthbannerItem.src" :class="fifthbannerItem.class"
                                      :style="fifthbannerItem.style"></image>
                                  </block>
                                </navigator>
                                <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style"
                                  :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</h2>
                                <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style"
                                  :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>
                                <!-- 第五层循环 tagType == 'div'-->
                                <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class"
                                  :style="fourthbannerItem.style">
                                  <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>
                                  <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child"
                                    :key="fifthbannerIndex">
                                    <navigator v-if="fifthbannerItem.tagType == 'a'" :url="fifthbannerItem.href"
                                      :target="fifthbannerItem.target" :class="fifthbannerItem.class"
                                      :style="fifthbannerItem.style" hover-class="none">
                                      <block v-if="fifthbannerItem.text">{{ fifthbannerItem.text }}</block>

                                      <block v-for="(sixthbannerItem, sixthbannerIndex) in fifthbannerItem.child"
                                        :key="sixthbannerIndex">
                                        <image class="animated fadeIn" v-if="sixthbannerItem.tagType == 'img'"
                                          :mode="sixthbannerItem.mode ? sixthbannerItem.mode : modeStyle"
                                          :src="sixthbannerItem.src" :class="sixthbannerItem.class"
                                          :style="sixthbannerItem.style"></image>
                                      </block>
                                    </navigator>
                                    <image class="animated fadeIn" v-if="fifthbannerItem.tagType == 'img'"
                                      :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                                      :src="fifthbannerItem.src" :class="fifthbannerItem.class"
                                      :style="fifthbannerItem.style"></image>
                                    <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style"
                                      :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>
                                    <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style"
                                      :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                                  </block>
                                </view>
                              </block>
                            </view>
                          </block>
                        </view>
                      </block>
                    </view>

                    <!-- tagType == 'h2' -->
                    <view
                      v-if="firstbannerItem.tagType == 'h2' || firstbannerItem.tagType == 'h1' || firstbannerItem.tagType == 'h3'"
                      :class="firstbannerItem.class" :style="firstbannerItem.style">
                      <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
                    </view>

                    <!-- tagType == 'p' -->
                    <view @click="cmsClickHandle" :data-handle="firstbannerItem.onclick"
                      :data-text="firstbannerItem.text" v-if="firstbannerItem.tagType == 'p'"
                      :class="firstbannerItem.class" :style="firstbannerItem.style">
                      <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
                      <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child"
                        :key="secondbannerIndex">
                        <navigator v-if="secondbannerItem.tagType == 'a'" :url="secondbannerItem.href"
                          :target="secondbannerItem.target" :class="secondbannerItem.class"
                          :style="secondbannerItem.style" hover-class="none">
                          {{ secondbannerItem.text }}
                        </navigator>
                        <view v-if="secondbannerItem.tagType == 'strong'" :class="secondbannerItem.class"
                          :style="secondbannerItem.style">{{ secondbannerItem.text }}</view>
                      </block>
                    </view>
                  </block>
                </view>

                <!-- type == 'line' -->
                <view v-if="bannerItem.type == 'line'" :id="bannerItem.data.id" :class="bannerItem.data.class"
                  :style="bannerItem.data.style"></view>

                <!-- slideHTML页面  默认scroll-x scroll-y 手动添加 -->
                <view v-if="bannerItem.type == 'slide'" :class="bannerItem.data.class" :style="bannerItem.data.style">
                  <!-- 第一层循环 -->
                  <block v-for="(firstbannerItem, firstbannerIndex) in bannerItem.data.child" :key="firstbannerIndex">
                    <scroll-view v-if="firstbannerItem.tagType == 'scroll-view'" scroll-x="true"
                      :class="firstbannerItem.class" :style="firstbannerItem.style">
                      <!-- 第二层循环 -->
                      <block v-for="(secondsliderChildItem, secondsliderChildIndex) in firstbannerItem.child"
                        :key="secondsliderChildIndex">
                        <view v-if="secondsliderChildItem.tagType == 'div'" :class="secondsliderChildItem.class"
                          :style="secondsliderChildItem.style">
                          <block v-if="secondsliderChildItem.text">{{ secondsliderChildItem.text }}</block>
                          <!-- 第三层循环 tagType == 'div'-->
                          <block v-for="(thirdsliderChildItems, thirdsliderChildIndexs) in secondsliderChildItem.child"
                            :key="thirdsliderChildIndexs">
                            <image v-if="thirdsliderChildItems.tagType == 'img'"
                              :mode="thirdsliderChildItems.mode ? thirdsliderChildItems.mode : modeStyle"
                              :src="thirdsliderChildItems.src" :style="thirdsliderChildItems.style"
                              :class="thirdsliderChildItems.class"></image>

                            <navigator v-if="thirdsliderChildItems.tagType == 'a'" :style="thirdsliderChildItems.style"
                              :url="thirdsliderChildItems.href" :target="thirdsliderChildItems.target"
                              :class="thirdsliderChildItems.class" hover-class="none">
                              <block v-if="thirdsliderChildItems.text">{{ thirdsliderChildItems.text }}</block>

                              <!-- 第四层循环 tagType == 'a'-->
                              <block
                                v-for="(fourthsliderChildItems, fourthsliderChildIndexs) in thirdsliderChildItems.child"
                                :key="fourthsliderChildIndexs">
                                <image v-if="fourthsliderChildItems.tagType == 'img'"
                                  :mode="fourthsliderChildItems.mode ? fourthsliderChildItems.mode : modeStyle"
                                  :src="fourthsliderChildItems.src" :style="fourthsliderChildItems.style"
                                  :class="fourthsliderChildItems.class"></image>
                              </block>
                            </navigator>

                            <view v-if="thirdsliderChildItems.tagType == 'div'" :class="thirdsliderChildItems.class">
                              <block v-if="thirdsliderChildItems.text">{{ thirdsliderChildItems.text }}</block>
                              <!-- 第四层循环 tagType == 'div'-->
                              <block
                                v-for="(fourthsliderChildItems, fourthsliderChildIndex) in thirdsliderChildItems.child"
                                :key="fourthsliderChildIndex">
                                <h2 v-if="fourthsliderChildItems.tagType == 'h2'" :style="fourthsliderChildItems.style"
                                  :class="fourthsliderChildItems.class">
                                  {{ fourthsliderChildItems.text }}
                                </h2>
                                <p v-if="fourthsliderChildItems.tagType == 'p'" :style="fourthsliderChildItems.style"
                                  :class="fourthsliderChildItems.class">
                                  {{ fourthsliderChildItems.text }}
                                </p>
                                <navigator v-if="fourthsliderChildItems.tagType == 'a'"
                                  :url="fourthsliderChildItems.href" :style="fourthsliderChildItems.style"
                                  :class="fourthsliderChildItems.class" hover-class="none">
                                  <block v-if="fourthsliderChildItems.text">{{ fourthsliderChildItems.text }}</block>
                                  <!-- 第五层循环 tagType == 'a'-->
                                  <block
                                    v-for="(fifthsliderChildItems, fifthsliderChildIndexs) in fourthsliderChildItems.child"
                                    :key="fifthsliderChildIndexs">
                                    <image v-if="fifthsliderChildItems.tagType == 'img'"
                                      :mode="fifthsliderChildItems.mode ? fifthsliderChildItems.mode : modeStyle"
                                      :src="fifthsliderChildItems.src" :style="fifthsliderChildItems.style"
                                      :class="fifthsliderChildItems.class"></image>
                                  </block>
                                </navigator>
                                <view v-if="fourthsliderChildItems.tagType == 'div'"
                                  :class="fourthsliderChildItems.class" :style="fourthsliderChildItems.style">
                                  <block v-if="fourthsliderChildItems.text">{{ fourthsliderChildItems.text }}</block>
                                  <!-- 第五层循环 -->
                                  <block
                                    v-for="(fifthsliderChildItems, fifthsliderChildIndexs) in fourthsliderChildItems.child"
                                    :key="fifthsliderChildIndexs">
                                    <navigator v-if="fifthsliderChildItems.tagType == 'a'"
                                      :url="fifthsliderChildItems.href" :target="fifthsliderChildItems.target"
                                      :class="fifthsliderChildItems.class" :style="fifthsliderChildItems.style"
                                      hover-class="none">
                                      <block v-if="fifthsliderChildItems.text">{{ fifthsliderChildItems.text }}</block>
                                      <!-- 第六层循环 tagType == 'a'-->
                                      <block
                                        v-for="(sixthsliderChildItems, sixthsliderChildIndexs) in fifthsliderChildItems.child"
                                        :key="sixthsliderChildIndexs">
                                        <image v-if="sixthsliderChildItems.tagType == 'img'"
                                          :mode="sixthsliderChildItems.mode ? sixthsliderChildItems.mode : modeStyle"
                                          :src="sixthsliderChildItems.src" :style="sixthsliderChildItems.style"
                                          :class="sixthsliderChildItems.class"></image>
                                      </block>
                                    </navigator>
                                  </block>
                                </view>
                              </block>
                            </view>
                          </block>
                        </view>
                      </block>
                    </scroll-view>
                  </block>
                </view>

                <!-- lp页面 -->
                <view v-if="bannerItem.type == 'lp'" :style="bannerItem.data.style" :class="bannerItem.data.class">
                  <!-- 第一层循环 -->
                  <block v-for="(firstlpItem, firstlpIndex) in bannerItem.data.child" :key="firstlpIndex">
                    <scroll-view v-if="firstlpItem.tagType == 'scroll-view'" :style="firstlpItem.style"
                      scroll-x="firstlpItem.scroll-x" :class="firstlpItem.class">
                      <!-- 第二层循环 -->
                      <block v-for="(secondlpItem, secondlpIndex) in firstlpItem.child" :key="secondlpIndex">
                        <view v-if="secondlpItem.tagType == 'div'" :class="secondlpItem.class"
                          :style="secondlpItem.style">
                          <!-- 第三层循环 -->
                          <block v-for="(thirdlpItems, thirdlpIndexs) in secondlpItem.child" :key="thirdlpIndexs">
                            <navigator v-if="thirdlpItems.tagType == 'a'" :style="thirdlpItems.style"
                              :url="thirdlpItems.href" :target="thirdlpItems.target" :class="thirdlpItems.class"
                              hover-class="none">
                              <!-- 第四层循环 -->
                              <block v-for="(fourthlpItems, fourthlpIndexs) in thirdlpItems.child"
                                :key="fourthlpIndexs">
                                <image v-if="fourthlpItems.tagType == 'img'"
                                  :mode="fourthlpItems.mode ? fourthlpItems.mode : modeStyle" :src="fourthlpItems.src"
                                  :style="fourthlpItems.style" :class="fourthlpItems.class"></image>
                              </block>
                            </navigator>
                            <view v-if="thirdlpItems.tagType == 'div'" :class="thirdlpItems.class">
                              <!-- 第四层循环 -->
                              <block v-for="(fourthlpItems, fourthlpIndex) in thirdlpItems.child" :key="fourthlpIndex">
                                <h2 v-if="fourthlpItems.tagType == 'h2'" :style="fourthlpItems.style"
                                  :class="fourthlpItems.class">{{ fourthlpItems.text }}</h2>
                                <p v-if="fourthlpItems.tagType == 'p'" :style="fourthlpItems.style"
                                  :class="fourthlpItems.class">{{ fourthlpItems.text }}</p>
                                <view v-if="fourthlpItems.tagType == 'div'" :class="fourthlpItems.class"
                                  :style="fourthlpItems.style">
                                  <!-- 第五层循环 -->
                                  <block v-for="(fifthlpItems, fifthlpIndexs) in fourthlpItems.child"
                                    :key="fifthlpIndexs">
                                    <navigator v-if="fifthlpItems.tagType == 'a'" :url="fifthlpItems.href"
                                      :target="fifthlpItems.target" :class="fifthlpItems.class"
                                      :style="fifthlpItems.style" hover-class="none">
                                      {{ fifthlpItems.text }}
                                    </navigator>
                                  </block>
                                  <!-- 第五层循环 end -->
                                </view>
                              </block>
                              <!-- 第四层循环 end -->
                            </view>
                          </block>
                        </view>
                      </block>
                    </scroll-view>
                  </block>
                  <!-- 第一层循环 end -->
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>

      <!--底部banner调用特定位置banner组件-->
      <!--      <block v-if="filterChecked.fliterCmsFooterBanner(bannerPosition)">
        <bannerPlugin :bannerItemsArr.sync="bannerItemsArr" :footerBannerPosition.sync="footerBannerPosition">
        </bannerPlugin>
      </block>
    <block v-else>
        <view v-if="hasMore > 0" class="hasMore">已到页面底部</view>
      </block> -->
    </scroll-view>
    <cart-toast v-if="showCartMsg" :cartMessage='cartMessage' :cartStatus='cartStatus' bottom="64rpx"></cart-toast>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>

<script>
  import PromotionTagsTpl from "../promotionTags/promotionTags.vue";
  import BannerPlugin from '../wxparse/bannerPlugin';
  import util from '@/utils/util.js'
  import api from "@/api/api";
  import tip from '@/utils/tip';
  import CartToast from '@/components/common/cartToast.vue';
  import {
    SYSTEM_INFO,
    MERCHANT_INFO,
    CUSTOMER_INFO,
    USER_INFO,
    CART_KEY,
    USER_SPECICAL_INFO,
  } from "@/utils/constant";
  export default {
    components: {
      promotionTagsTpl: PromotionTagsTpl,
      bannerPlugin: BannerPlugin,
      CartToast
    },
    props: {
      searchType: String,
      defaultKeyword: String,
      list: Array,
      listResult: Array,
      bannerPosition: Array,
      footerBannerPosition: String,
      bannerItemsArr: Array,
      groupId: Number,
      purchasetype: {
        default: 1 //类型:1-商品订单;2-商品补单;
      },
      special: {
        default: 0 //0-正常入库;1-特价专区和换货专区
      },
      showTitle: {
        default: true
      },
      finishLoadFlag: {
        type: Number,
        default: 0, // 设定选中项
        // 双向 这里必须制定 true
        twoWay: true
      },
      hasMore: {
        type: Number,
        default: 0
      },
      isAppend: Number,
      categoryName: String,
      navbarData: {
        //navbarData   由父页面传递的数据，变量名字自命名
        type: Object
      },

      type: {
        type: String,
        default: '',
      },
      drawTask: {
        type: Boolean,
        default: false
      },
      utoolsClassGoodsLists: {
        type: Array,
        default: () => []
      },
      userOrderLists: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        finishLoadFlagSon: this.finishLoadFlag,
        markingPrice: '',
        price: '',
        linePrice: false,
        nowPrice: false,
        frontProperties: [],
        defaultImage: 'https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/default.png',
        //原始图片
        originalImage: String,
        width: String,
        height: String,
        //图片剪裁mode，同Image组件的mode
        mode: String,
        imageHeight: 505,
        jumpHandleNames: ['jump_a', 'jump_b', 'jump_c'],
        promotionTagData: [],
        memberLevelGroup: String,
        memberStatus: String,
        userGroupId: String,

        promotionType: String,
        genneralTag: 'genneral_tag',
        customTag: 'custom_tag',

        forwardPurchaseGoods: false,
        tempItemId: String,
        tempValueId: String,
        tempFrontCode: String,
        defaultImgUrl: "",
        newlistResult: [],
        iphoneModel: 0,
        showCartMsg: false, //加购提示弹窗
        cartStatus: false,
        cartMessage: '',
      };
    },
    mounted() {
      this.imageHeight = 360 / uni.getStorageSync('imageScaling');
      let imageScaling = uni.getStorageSync('imageScaling')
      this.defaultImgUrl = imageScaling == 2 / 3 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/2-3.png" : imageScaling == 3 / 4 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/3-4.png" : imageScaling == 4 / 5 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/4-5.png" : imageScaling == 1 / 1 ?
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/1-1.png" :
        "https://100000000-1252208446.cos.ap-shanghai.myqcloud.com/images/1-1.png"
      let isIos = uni.getSystemInfoSync().system.indexOf('iOS')
      let platform = uni.getSystemInfoSync().model
      if (isIos == 0) {
        if (platform.indexOf('12') !== -1 || platform.indexOf('13') !== -1) {
          if (platform.indexOf('Max') !== -1) {
            this.iphoneModel = 1
          } else {
            this.iphoneModel = 2
          }
        }
      }
      this.drawControl();
    },
    onLoad() {
      this.finishLoadFlagSon = 0;
    },
    watch: {
      hasMore: function(newVal, oldVal) {
        this.hasMore = newVal;
      },

      cateCode: function(newVal, oldVal) {
        this.cateCode = newVal;
      },

      footerBannerPosition: function(newVal, oldVal) {
        this.footerBannerPosition = newVal;
      }
    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      // 商品加入购物车功能
      async addCart(item) {
        let that = this;
        try {
          const goodsId = item.itemId;
          let merchantInfo = uni.getStorageSync("merchantInfo");
          let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
          let userInfo = uni.getStorageSync(USER_INFO);
          if (!customerInfo && !userInfo) {
            // that.registerType = "cart";
            that.getUserProfile();
            return false;
          } else if (!customerInfo && !!userInfo) {
            // that.registerType = "cart";
            that.$refs.registerWidgetRef.openJoinMemberModal();
            return false;
          }
          let goodsInfo = await this.getGoodsDetail(merchantInfo, goodsId);
          if (!goodsInfo || goodsInfo.code != 1000)
            return this.handleCartToast({
              success: false,
              msg: "加入购物车失败",
            });
          // 加入购物车
          const cartRes = await this.$commonFunction.buildProductsAddCart({
            price: goodsInfo.data.skus[0].price,
						itemId: goodsInfo.data.itemId,
            valueId: goodsInfo.data.frontProperties[0].valueId,
            itemCode: goodsInfo.data.itemId,
            itemName: goodsInfo.data.itemName,
            qty: 1,
            skuCode: goodsInfo.data.skus[0].skuCode,
            skuId: goodsInfo.data.skus[0].skuId,
          });
          //  加入购物车提示
          this.handleCartToast(cartRes);
        } catch (e) {
          this.handleCartToast({
            success: false,
            msg: "加入购物车失败",
          });
        }
      },
      //获取商品详情
      async getGoodsDetail(merchantInfo, goodsId) {
        const json = await api.goodsDetail({
            query: {
              merchant_id: merchantInfo.cloudMerchantId,
              store_id: merchantInfo.cloudMerchantStoreId
            }
          },
          goodsId
        );
        return json
      },
      /**
       * 加购提示
       * @param {Object} obj
       */
      async handleCartToast(obj) {
				const _arr = ['您动作太快，请慢点哟～', '网络状态不佳，请重试'];
				if(obj.msg && _arr.includes(obj.msg)){
					this.handleShowTextToast(obj.msg)
				}else if(obj.data && obj.data.msg && obj.data.type === 'showToast'){
					this.handleShowTextToast(obj.data.msg)
				}else{
					if (obj?.success) this.getCartList();
					this.cartMessage = obj?.msg || "加入购物车失败";
					this.cartStatus = obj?.success || false;
					this.showCartMsg = true;
					setTimeout(() => {
						this.showCartMsg = false;
					}, 3000);
				}
      },
      //获取购物车商品列表
      getCartList: async function() {
        let that = this;
        let cart_key = uni.getStorageSync(CART_KEY);
        let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
        try {
          if (jwt && cart_key !== null) {
            that.$commonFunction.getCartList().then((res) => {
              if (res && res.items !== null) {
                getApp().globalData.cartNum = res.availableTotalQty;
                that.cartNum = res.availableTotalQty;
                that.$store.commit('changeCartNum', res.availableTotalQty);
                uni.setStorageSync('cartNum', res.availableTotalQty);
              }
            }).catch((err) => {
              // tip.plainText(err.msg);
            });
          }
        } catch (err) {
          
        }
      },
      getUserProfile: async function() {
        let that = this;
        this.$commonFunction
          .commonLoginNew()
          .then((res) => {
            if (res.code !== 1000) {
              this.$refs.registerWidgetRef.openJoinMemberModal();
            } else if (res.data && res.data.mobile) {
              //  非大陆手机号按照非会员对待,重新入会
              const phoneNumberReg = /^1\d{10}$/;
              if (!phoneNumberReg.test(res.data.mobile)) {
                this.$refs.registerWidgetRef.openJoinMemberModal()
              }
            }
          })
          .catch((err) => {
            this.$refs.registerWidgetRef.openJoinMemberModal();
          });
      },
      //抽签时间控制
      async drawControl() {
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || getApp().globalData.merchantInfo;
        let that = this
        let listArr = this.listResult;
        for (let i = 0; i < listArr.length; i++) {
           // const _goodsRes = await that.getDetailsById(merchantInfo, listArr[i].itemId)
          // if (listArr[i].activitySelection) {
            // let dealObj = JSON.parse(JSON.stringify(listArr[i]));
            // that.$commonFunction.timeStatus(listArr[i]).then((res) => {
            //   listArr[i].activitySelection.dateStatus = res.dateStatus.replace(/\//g, '-')
            //   listArr[i].activitySelection.joinStatus = res.joinStatus
            //   // listArr[i].activitySelection.dateStatus = await this.timeStatus(listArr[i]).dateStatus
            //   // listArr[i].activitySelection.joinStatus = await this.timeStatus(listArr[i]).joinStatus
            // }).catch(err => {})
          // }
          // if (_goodsRes) listArr[i].skuImageUrl = _goodsRes;
          if (!!JSON.parse(listArr[i].frontCustomParameters) && JSON.parse(listArr[i].frontCustomParameters)
            .className) {
            listArr[i].titleName = JSON.parse(listArr[i].frontCustomParameters).className
          } else {
            listArr[i].titleName = ''
          }
        }
        this.newlistResult = listArr

      },
      /**
       * 获取商品详情
       * @param {Object} merchantInfo
       * @param {Object} itemId
       */
      async getDetailsById(merchantInfo, itemId) {
        return new Promise(async (resolve, reject) => {
          const _res = await api.goodsDetail({
              query: {
                merchant_id: merchantInfo.cloudMerchantId,
                store_id: merchantInfo.cloudMerchantStoreId
              }
            },
            itemId
          );
          let _img = "";
          if (_res && _res.code == 1000 && _res.data && _res.data.resources && _res.data.resources.length) {
            const _obj = _res.data.resources.find((item) => item.kind == "hdlp");
            if (_obj && _obj.kind == "hdlp" && _obj.type == "image" && _obj.url) _img = _obj.url;
          }
          resolve(_img)
        })
      },
      timeStatus(item) {
        let nowTime = new Date().getTime()
        let drawStartTime = item.activitySelection.activitySelectionStartTime
        let drawEndTime = item.activitySelection.activitySelectionEndTime
        let promulgateTime = item.activitySelection.promulgateTime
        let buyEndTime = item.activitySelection.buyEndTime
        let activityStopTime = item.activitySelection.activityStopTime
        let obj = {}
        let showTime;
        let showText;
        if (nowTime < drawStartTime) {
          showTime = util.timeFormat(drawStartTime) + ' 开始登记'
          showText = '未开放登记信息'
        } else if (nowTime > drawStartTime && nowTime < drawEndTime) {
          showTime = util.timeFormat(drawEndTime) + ' 登记结束'
          showText = '开放登记信息'
        } else if (nowTime > drawEndTime && nowTime < promulgateTime) {
          showTime = util.timeFormat(promulgateTime) + ' 公布结果'
          showText = '等待公布结果'
        } else if (nowTime > promulgateTime && nowTime < buyEndTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '结果已公布'
        } else if (nowTime > buyEndTime && nowTime < activityStopTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '活动已结束'
        } else {
          showTime = ''
          showText = ''
        }
        obj.dateStatus = showTime
        obj.joinStatus = showText
        return obj
      },
      jumpPage(e) {
        let that = this;
        let itemId = e.currentTarget.dataset.itemid;
        let valueId = e.currentTarget.dataset.valueid;
        let valueName = e.currentTarget.dataset.valuename;
        let classId = e.currentTarget.dataset.classid;
        uni.navigateTo({
          url: '/pages/item/item?id=' +
            itemId +
            '&valueId=' +
            valueId +
            '&valueName=' +
            valueName +
            '&purchasetype=' +
            that.purchasetype +
            '&special=' +
            that.special +
            '&categoryName=' +
            that.categoryName +
            '&classIdArr=' +
            classId +
            '&classId=' +
            that.cateCode +
            '&drawTask=' + that.drawTask +
            "&hasExpose=true"
        });
        that.$commonSensors.searchResultClick(this.defaultKeyword, this.searchType, that.newlistResult[e.currentTarget
          .dataset.index])
      },

      finishLoad: function(e) {
        let that = this;
        setTimeout(() => {
          that.list[e.currentTarget.dataset.index].isLoad = true;
          that.finishLoadFlagSon = 1;
        }, 300);
      },

      // cms组件点击事件
      cmsClickHandle(e) {
        let handleName = e.target.dataset.handle || '';
        let text = e.target.dataset.text || '';
        if (!handleName) {
          return;
        }

        this.$EFSTracking.trackingAction('CLICK_LIST_PAGE', JSON.stringify({
          "handleName": handleName,
          "text": text
        }), {});

        // 锚点链接
        if (this.jumpHandleNames.indexOf(handleName) !== -1) {
          const query = uni.createSelectorQuery().in(this);
          query.select('#' + handleName).boundingClientRect()
          query.selectViewport().scrollOffset()
          query.exec(function(res) {
            uni.pageScrollTo({
              scrollTop: res[0].top + res[1].scrollTop - 60,
              duration: 500
            });
          })
        }
      }
    }
  };
</script>
<style lang="less">
  .content {
    width: 318rpx;
    height: 628rpx;
  }

  .shop_item {
    padding: 0rpx 20rpx;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30rpx;
  }

  .shop_item_banner {
    display: flex;
    flex-wrap: wrap;
    // padding: 0 2%;
    width: 100%;
    background: #FFFFFF;

    justify-content: center;
  }

  .hasMore {
    margin-bottom: 48rpx;
    font-size: 12px;
    color: #444;
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  // .list:nth-child(even) {
  //   margin-right: 0;
  // }

  .navigator-hover {
    background: none;
    opacity: 1;
  }

  .bannerList {
    width: 100%;
  }

  .list {

    display: inline-block;
    vertical-align: top;
    // margin-bottom: 2.3%;
    margin-bottom: 16rpx;
    // width: 48.94%;
    // height: 580rpx;
    overflow: hidden;
    background: #fff;

    &.drawList {
      // height: 610rpx;
    }

    .image_box {
      width: 318rpx;
      height: 424rpx;
      position: relative;
      overflow: hidden;
      font-size: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }

    .product_name {
      line-height: 46rpx;
      line-clamp: 1;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      font-size: 24rpx;
      // padding: 0 20rpx;
      // margin: 20rpx 0 16rpx 0;
      text-align: start;
      font-family: FrankNew-Medium, NotoSansSC-Medium;
    }

    .activity_name {
      line-height: 46rpx;
      line-clamp: 1;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      font-size: 24rpx;
      font-weight: 500;
      font-family: NotoSansSC-Medium;
      // font-weight: 600;
    }

    .activity_date {
      line-height: 26rpx;
      font-size: 22rpx;
      margin-top: 8rpx;
      margin-bottom: 16rpx;
      font-weight: 400;
      font-family: NotoSansSC-Medium;
    }

    .activity_status {
      padding: 24rpx 20rpx 26rpx;
      color: rgb(181, 181, 181);
      font-size: 24rpx;

      &.green {
        color: rgb(90, 166, 138);
      }

      &.red {
        color: rgb(156, 81, 91);
      }
    }

    .activity_btn {
      width: 318rpx;
      background-color: #fff;
      color: #000000;
      font-size: 20rpx;
      height: 40rpx;
      border: 2rpx solid #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx 8rpx 24rpx 20rpx;
      font-weight: 500;
      font-family: NotoSansSC-Medium;
    }

    // 划线价
    .markPrice {
      display: flex;

      .linePrice {
        text-decoration: line-through;
        color: #444444;
        font-weight: 600;
        text-align: left;
        font-size: 24rpx;
      }

      .nowPrice {
        margin-left: 10rpx;
        color: #ff571a;
        font-weight: 600;
        text-align: left;
        font-size: 24rpx;
      }
    }

    .price {
      font-size: 32rpx;
      text-align: center;
      line-height: 40rpx;
      margin-top: 24rpx;
      font-family: FrankNew-Regular;

      &.iphone12 {
        display: flex;
        justify-content: flex-start;
        font-family: FrankNew-Regular, NotoSansSC-Regular;
      }
    }

    .color-sub {
      color: #aeaeae;
      line-height: 24rpx;
      font-size: 24rpx;
      text-align: center;
      /* padding-bottom: 20rpx; */
    }

    // 色块
    .colorBlock {
      display: flex;
      flex-wrap: wrap;

      .skuImageUrl {
        margin: 0 12rpx 0 0;
        padding: 5px 0;
        width: 26rpx;
        height: 26rpx;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .cost_price {
      color: #666666;
      text-decoration: line-through;
      font-weight: 600;
    }

    .sale_num {
      color: #666666;
      font-size: 22rpx;
    }

    .goods {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 12rpx;
    }

    .product_info {
      display: flex;
      align-items: flex-end;
    }

    .cost_price {
      padding-left: 20rpx;
    }

    .sale_num {
      padding-left: 20rpx;
    }
  }

  /*样式*/
  .cos-goods {
    // width: 351rpx;
    // padding-bottom: 20rpx;

    .colorChoose {
      width: 60%;
      display: flex;
      flex-flow: row wrap;
      justify-content: left;
      align-content: flex-start;
      height: 100rpx;

      .color-item {
        width: 11px;
        height: 11px;
        background: #000000;
        margin: 10rpx 0 0 10rpx;
      }
    }
  }

  .list .image_box image.before-load {
    width: 0;
    height: 0;
    opacity: 0;
  }

  .list .image_box image.fade_out {
    animation: opacity 0.5s 1;
    animation-fill-mode: forwards;
    position: absolute;
    left: 0;
    top: 0;
    // width: 347.88rpx;
    // height: 505rpx;
  }

  @keyframes opacity {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .marker-text {
    color: #bb762b;
    font-size: 24rpx;
  }

  // new标签样式
  .newTag {
    font-weight: 400;
    letter-spacing: 0.0825em;
    position: absolute;
    top: 16rpx;
    left: -8rpx;
    padding: 0 16rpx;
    color: #ffffff;
    background-color: #b89978;
    z-index: 1;
    font-size: 18rpx;
    line-height: 36rpx;
  }

  .goodsTag {
    color: #ff571a;
    font-size: 24rpx;
    margin-right: 6rpx;
  }

  .saleBox {
    display: flex;
    line-height: 36rpx;
    flex-flow: row wrap;
  }

  .saleBox label {
    color: #ff571a;
    font-size: 24rpx;
    margin-right: 30rpx;
  }

  .tag2 {
    color: #8D9AAB;
  }

  .rule-price-box {
    display: flex;
    flex-flow: row wrap;
  }

  .swiper-item-box {
    background-color: #f7f5f4;
  }

  .cos-goodsEs {
    color: #757575;
    font-family: FrankNew-Regular;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 30rpx;
    height: 40rpx;
    margin-bottom: 4rpx;
  }

  .active_name_state {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .addGoodsIcon {
    position: absolute;
    right: 32rpx;
    bottom: 31rpx;
    width: 46rpx;
    height: 46rpx;
    text-align: center;
    line-height: 46rpx;
    // background-color: #FFFFFF;
  }
</style>
